<template>
  <van-nav-bar
    class="back-header"
    :title="title"
    left-text="返回"
    right-text="按钮"
    left-arrow
    placeholder
    fixed
    @click-left="onClickLeft"
  >
    <template #right>
      <van-icon name="ellipsis" size='20'/>
    </template>
  </van-nav-bar>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { defineComponent } from "vue";

export default defineComponent({
  props: ["title"],
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.back();
    };
    return { onClickLeft };
  },
});
</script>

<style lang='scss' scoped>
::v-deep.back-header {
  .van-nav-bar__content {
    background: gray;
    .van-nav-bar__title{
      font-size: 14px;
    }
    * {
      color: #fff;
    }
  }
}
</style>
